@-webkit-keyframes flipTop {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg); }

  100% {
    -webkit-transform: perspective(400px) rotateX(-90deg); } }

@-webkit-keyframes flipBottom {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg); }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg); } }

@-moz-keyframes flipTop {
  0% {
    -moz-transform: perspective(400px) rotateX(0deg); }

  100% {
    -moz-transform: perspective(400px) rotateX(-90deg); } }

@-moz-keyframes flipBottom {
  0% {
    -moz-transform: perspective(400px) rotateX(90deg); }

  100% {
    -moz-transform: perspective(400px) rotateX(0deg); } }

@-ms-keyframes flipTop {
  0% {
    -ms-transform: perspective(400px) rotateX(0deg); }

  100% {
    -ms-transform: perspective(400px) rotateX(-90deg); } }

@-ms-keyframes flipBottom {
  0% {
    -ms-transform: perspective(400px) rotateX(90deg); }

  100% {
    -ms-transform: perspective(400px) rotateX(0deg); } }

@keyframes flipTop {
  0% {
    transform: perspective(400px) rotateX(0deg); }

  100% {
    transform: perspective(400px) rotateX(-90deg); } }

@keyframes flipBottom {
  0% {
    transform: perspective(400px) rotateX(90deg); }

  100% {
    transform: perspective(400px) rotateX(0deg); } }
.comp-total {
  .dataStatistics {
    color: #F7F7F7;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding-bottom:156px;
    .seconds, .minutes, .hours, .days {
      height: 100%;
      display: inline;
    }
    .totaltext{
      //width: 230px;
      //height: 180px;
      text-align: center;
      margin:0 auto;
      color:#333333;
      font-size: 24px;
      font-weight: bold;
      padding: 100px 0 74px 0;
    }
    .digit_set {
      width: 82px;
      height: 87px;
      display: inline-block;
      position: relative;
      margin: 0 5px;
      line-height: 87px;
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      font-size: 60px;
      font-weight: bold;
    }
    .longMargin{
      margin-right: 15px;
    }
    .digit {
      position: absolute;
      height: 100%;
      .digit_line{
        position: absolute;
        top:50%;
        z-index: 3;
        height:1px;
        background-color:rgba(0,0,0,0.12);
      }
      > div {
        position: absolute;
        left: 0;
        overflow: hidden;
        height: 50%;
        width: 36px;
        padding: 0 23px;
        &.digit_top, &.shadow_top {
          width: 82px;
          background:#3E73E4;
          border-bottom: 1px solid rgba(0, 0, 0, 0.12);
          box-sizing: border-box;
          top: 0;
          z-index: 0;
          border-radius: 5px 5px 0 0;
        }
        &.digit_top:before {
          content: "";
          height: 100%;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        &.shadow_top {
          &:before {
            content: "";
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          width: 82px;
          opacity: 0;
          -webkit-transition: opacity 0.3s ease-in;
        }
        &.digit_bottom, &.shadow_bottom {
          background: #3E73E4;
          bottom: 0;
          z-index: 0;
          border-radius: 0 0 5px 5px;
        }
        &.digit_bottom .digit_wrap, &.shadow_bottom .digit_wrap {
          display: block;
          margin-top: -120%;
        }
        &.digit_bottom:before, &.shadow_bottom:before {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          content: "";
        }
      }
    }
  }

  .digit_wrap {
    line-height: 87px;
    display: block;
    overflow: hidden;
  }

  .dataStatistics .digit {
    > div.shadow_bottom {
      opacity: 0;
      -webkit-transition: opacity 0.3s ease-in;
    }
    &.previous {
      .digit_top, .shadow_top {
        opacity: 1;
        z-index: 2;
        -webkit-transform-origin: 50% 100%;
        -webkit-animation: flipTop 0.3s ease-in both;
        -moz-transform-origin: 50% 100%;
        -moz-animation: flipTop 0.3s ease-in both;
        -ms-transform-origin: 50% 100%;
        -ms-animation: flipTop 0.3s ease-in both;
        transform-origin: 50% 100%;
        animation: flipTop 0.3s ease-in both;
      }
      .digit_bottom, .shadow_bottom {
        z-index: 1;
        opacity: 1;
      }
    }
    &.active {
      .digit_top {
        z-index: 1;
      }
      .digit_bottom {
        z-index: 2;
        -webkit-transform-origin: 50% 0%;
        -webkit-animation: flipBottom 0.3s 0.3s ease-out both;
        -moz-transform-origin: 50% 0%;
        -moz-animation: flipBottom 0.3s 0.3s ease-out both;
        -ms-transform-origin: 50% 0%;
        -ms-animation: flipBottom 0.3s 0.3s ease-out both;
        transform-origin: 50% 0%;
        animation: flipBottom 0.3s 0.3s ease-out both;
      }
    }
  }
}

